// 点击试卷后的缩略信息
<template>
  <div id="msg">
    <div class="wrapper">
      <div class="top">
        <div class="example">{{ examData.source }}</div>
      </div>
      <el-button @click="toAnswer(examData.id)" style="float: right"
        >开始答题</el-button
      >
      <span>学院： {{ examData.institute }}</span>
      <span>{{ examData.type }}</span>
      <br />
      <dev @click="dialogVisible = true">
        <a href="javascript:;">考生须知</a>
      </dev>
      <br />
    </div>

    <div>
      <el-collapse v-model="activeName">
        <el-collapse-item   name="0">
          <template slot="title">
            <span>{{ examData.source }}</span>
            <span
              >{{ examData.totalscore }}分/{{ examData.totaltime }}分钟</span
            >
            <el-button type="primary" size="small">点击查看试题详情  </el-button>
          </template>
          
            <el-collapse-item name="1">
              <template slot="title"> 选择题 </template>
              <ul v-for="(list, index) in dataList" :key="index">
                <li v-if="list.questionType === 1">
                  {{ index + 1 }}. {{ list.question.question }}
                  {{ list.question.score }}分
                </li>
              </ul>
            </el-collapse-item>

            <el-collapse-item name="2">
              <template slot="title"> 填空题 </template>
              <ul v-for="(list, index) in dataList" :key="index">
                <li v-if="list.questionType === 2">
                  {{ index + 1 }}.{{ list.question.question }}
                  {{ list.question.score }}分
                </li>
              </ul>
            </el-collapse-item>

            <el-collapse-item name="3">
              <template slot="title"> 判断题 </template>
              <ul
                class="question"
                v-for="(list, index) in dataList"
                :key="index"
              >
                <li v-if="list.questionType === 3">
                  {{ index + 1 }}. {{ list.question.question }}
                  {{ list.question.score }}分
                </li>
              </ul>
            </el-collapse-item>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!--考生须知对话框-->
    <el-dialog title="考生须知" :visible.sync="dialogVisible" width="30%">
      <span>{{ examData.tips }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {

  data() {
    return {
      activeName:'0',
      dataList: {},
      id: null,
      dialogVisible: false, //对话框属性
      activeName: "0", //默认打开序号
      topicCount: [], //每种类型题目的总数
      score: [], //每种类型分数的总数
      examData: {
        //考试信息
        // source: null,
        // totalScore: null,
      },
      topic: {
        //试卷信息
      },
    };
  },

  created() {
    this.init();
  
  },
  methods: {
  
    //初始化页面数据
      init() {
      this.id = this.$route.query.id; //获取路由传递过来的试卷编号
      this.$http({
        url: this.$http.adornUrl(`/exam/exammanage/info/${this.id}`),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.examData = data.examManage;
          this.getDataList(this.examData);
        }
      });
    },

    getDataList(examData) {
      
      this.$http({
        url: this.$http.adornUrl("/exam/papermanage/paperList"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          data.paperInfos.forEach((item) => {
            if (item.paperId === examData.paperid) {
              this.dataList = item.children;
            }
          });
        } else {
          this.dataList = [];
        }
        
      });
    },

    toAnswer(id) {
      this.$router.replace({ name: "answer", query: { id: id } });
    },
  },
};
</script>




<style lang="scss" scoped>
.bottom {
  color: #000;
  .right {
    .el-button {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
      color: #000;
    }
  }
}
.right {
  margin-left: auto;
  color: #000;
}
.inner .contenti .question {
  margin-left: 40px;
  color: #9a9a9a;
  font-size: 14px;
}
.content .inner .titlei {
  margin-left: 20px;
  font-size: 16px;
  color: #88949b;
  font-weight: bold;
}
.content .title .time {
  font-size: 16px;
  margin-left: 420px;
  color: #999;
}
.content .stitle {
  background-color: #0195ff;
}
.content .title span {
  margin-right: 10px;
}
#msg .content .title {
  font-size: 20px;
  margin: 0px;
  display: flex;
  align-items: center;
}
.content {
  margin-top: 20px;
  background-color: #fff;
}
.content .header {
  padding: 10px 30px;
}
.wrapper .info {
  margin: 20px 0px 0px 20px;
  border-top: 1px solid #eee;
  padding: 20px 0px 10px 0px;
  color: #000;
}
.wrapper .info a {
  color: #88949b;
  font-size: 14px;
}
.wrapper .info a:hover {
  color: #0195ff;
}
.wrapper .bottom .btn {
  cursor: pointer;
  padding: 5px 10px;
  // border: 1px solid #88949b;
  border-radius: 4px;
  color: #000;
}
.wrapper .bottom {
  display: flex;
  margin-left: 20px;
  color: #999;
  font-size: 14px;
  align-items: center;
}
.wrapper .bottom li {
  margin-right: 14px;
}
#msg {
  background-color: #eee;
  width: 980px;
  margin: 0 auto;
}
#msg .title {
  margin: 20px;
}
#msg .wrapper {
  background-color: #fff;
  padding: 10px;
}
.wrapper .top {
  display: flex;
  margin: 20px;
  align-items: center;
}
.wrapper .top .right {
  margin-left: auto;
}
.wrapper .top .example {
  color: #333;
  font-size: 22px;
  font-weight: 700;
}
.wrapper .top li i {
  margin-left: 20px;
  color: #88949b;
}
.wrapper .right .count {
  margin-right: 60px;
  color: #fff;
  padding: 4px 10px;
  background-color: #88949b;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid #88949b;
}
.wrapper .right .score {
  position: absolute;
  left: 53px;
  top: -5px;
  padding: 1px 12px;
  font-size: 20px;
  color: #88949b;
  border: 1px dashed #88949b;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  font-weight: bold;
}
.wrapper .right div {
  position: relative;
}
</style>
